<template>
    <div class="container">
        <Header :left="true" title="新增门店"></Header>
        <el-form :model="form" ref="ruleForm" label-width="110px">
            <el-form-item prop="shopName" label="门店名称" :rules="[{ required: true, message: '请输入门店名称', trigger: 'blur' }]" >
                <el-input v-model="form.shopName" :maxlength="50" placeholder="请输入门店名称"></el-input>
            </el-form-item>
            <el-form-item prop="shopPrincipalName" label="负责人姓名" :rules="[{ required: true, message: '请输入负责人姓名', trigger: 'blur' }]" >
                <el-input v-model="form.shopPrincipalName" placeholder="请输入负责人姓名"></el-input>
            </el-form-item>
            <el-form-item prop="shopPrincipalPhone" label="负责人手机号" :rules="[{ required: true, message: '请输入负责人手机号', trigger: 'blur' }]" >
                <el-input v-model="form.shopPrincipalPhone" placeholder="请输入负责人手机号"></el-input>
            </el-form-item>
            <el-form-item prop="alipayTrueName" label="转账账户名" :rules="[{ required: true, message: '请输入转账账户名', trigger: 'blur' }]" >
                <el-input v-model="form.alipayTrueName" placeholder="请输入转账账户名"></el-input>
            </el-form-item>
            <el-form-item label="银行卡支行">
                <el-input v-model="form.bankBranch" placeholder="请输入银行卡支行"></el-input>
            </el-form-item>
            <el-form-item prop="alipayAccount" label="转账账户" :rules="[{ required: true, message: '请输入转账账户', trigger: 'blur' }]" >
                <el-input v-model="form.alipayAccount" placeholder="请输入转账账户"></el-input>
            </el-form-item>
            <el-form-item prop="cityValue" label="选择地区" :rules="[{type:'array', required: true, len:3,message: '请选择地区选择地区', trigger: 'blur' }]" >
                <el-cascader v-model="form.cityValue" :options="city"></el-cascader>
            </el-form-item>
            <el-form-item prop="detailAddress" label="详细地址" :rules="[{ required: true, message: '请输入详细地址', trigger: 'blur' }]" >
                <el-input v-model="form.detailAddress" placeholder="请输入详细地址"></el-input>
            </el-form-item>
            <el-form-item prop="type" label="门店类型" :rules="[{ required: true, message: '请选择门店类型', trigger: 'blur' }]" >
                <el-select v-model="form.type" style="width:100%">
                    <el-option :value="1" label="线上"></el-option>
                    <el-option :value="2" label="线下"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item prop="licenseUrl" label="营业执照" :rules="[{ required: true, message: '请输入上传营业执照', trigger: 'blur' }]" >
                <Upload :clear="true" v-model="form.licenseUrl" bg="#fff" ></Upload>
            </el-form-item>
            <div class="login-btn">
                <el-button style="width:100%" :loading="loading" type="primary" @click="confirmEvent">确认</el-button>
            </div>
        </el-form>
    </div>
</template>
<script>
import Header from '../../common/Header.vue';
import Upload from '../../common/Upload.vue';
import local from '../../libs/local';
export default {
    components:{Header,Upload},
    data:function(){
        return {
            loading:false,
            city:local,
            form:{
                shopName:'',
                shopPrincipalName:'',
                shopPrincipalPhone:'',
                alipayTrueName:'',
                alipayAccount:'',
                detailAddress:'',
                licenseUrl:'',
                type:'',
                provinceId:'',
                cityId:'',
                countyId:'',
                cityValue:[],
                bankBranch:''
            }
        };
    },
    methods:{
        confirmEvent(){
            var that = this;
            this.$refs['ruleForm'].validate((valid) => {
                if (!valid) { return; }
                var body = {
                    shopName:that.form.shopName,
                    shopPrincipalName:that.form.shopPrincipalName,
                    shopPrincipalPhone:that.form.shopPrincipalPhone,
                    alipayTrueName:that.form.alipayTrueName,
                    alipayAccount:that.form.alipayAccount,
                    detailAddress:that.form.detailAddress,
                    licenseUrl:that.form.licenseUrl,
                    type:that.form.type,
                    provinceId:that.form.cityValue[0],
                    cityId:that.form.cityValue[1],
                    countyId:that.form.cityValue[2],
                    bankBranch:that.form.bankBranch
                }
                that.loading = true;
                that.$http.post('/channel/channelShop/createOrUpdate.json',body).then(data=>{
                    that.loading = false;
                    if(data.data.code != '0'){
                        that.$message.error(data.data.msg);
                        return;
                    }
                    that.$message.success('添加成功');
                    that.$router.go(-1);
                }).catch(error=>{
                    that.$message.error('请求出错');
                    that.loading = false;
                });
            });
        }

    }
}
</script>
<style scoped>
    .container{
        width: 100%;min-height: 100%;
        background: #F2F6FC;
        padding:10px;
    }
    .box{
        width: 100%;
        position: relative;
        background: #fff;
        padding: 10px;
    }
    .search-box{
        padding: 10px 130px 10px 10px;
        position: relative;
    }
    .search-box .search-right{
        position: absolute;
        top:9px;right:10px;
    }
    .store{
        width: 100%;
        padding: 0 150px 0 0;
        position: relative;
    }
    .store .store-desc{
        font-size: 14px;color: #606266;margin-top: 10px;
    }
    .store .store-right{
        position: absolute;
        top:10px;
        right:0px;
    }
    .footer-btns{
        position: fixed;
        width: 100%;
        left: 0;bottom: 60px;
        padding: 10px 10px 20px 10px;
        background: #fff;
        border-top: 1px solid #DCDFE6;
    }
</style>
